<template>
  <div class="container">

    <br>
    <br>
    <br>

    <div class="login-wrapper">
      <div class="header">用户注册</div>

      <div class="form-wrapper">
        <form action="/login">
<!--          <el-icon><User /></el-icon>-->
          <input type="text" id="username" name="username" placeholder="admin" class="input-item">
          <p id="p1" style="display: none">登录规则1</p>
          <input type="password" id="password" name="password" placeholder="password" class="input-item">
          <p id="p2" style="display: none">登录规则2</p>
          <input type="password2" id="password2" name="password2" placeholder="password-confirm" class="input-item">
          <p id="p3" style="display: none">登录规则3</p>
        </form>

        <div class="btn" @click="check()">注册</div>


      </div>
      <div class="msg">
        让我们开启新的体验吧，
        <router-link to="/login">返回首页</router-link>
      </div>
    </div>

    <br>
    <br>
    <br>
  </div>
</template>

<script >
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name:"LoginView",
  methods:{
    check() {
      var username = document.getElementById("username").value
      var password = document.getElementById("password").value
      var password2=document.getElementById("password2").value

      if (username == "") {
        document.getElementById("p1").style.display = "inline"
        document.getElementById("p1").innerHTML = "用户名不能为空"
      } else {
        document.getElementById("p1").style.display = "none"
      }

      if (password == "") {
        document.getElementById("p2").style.display = "inline"
        document.getElementById("p2").innerHTML = "密码不能为空"
      } else {
        document.getElementById("p2").style.display = "none"
      }

      if (password2 == "") {
        document.getElementById("p3").style.display = "inline"
        document.getElementById("p3").innerHTML = "确认密码不能为空"
      } else {
        document.getElementById("p3").style.display = "none"
      }

      if( password2!=""&&password!=""&&password!=password2) {
        document.getElementById("p3").style.display = "inline"
        document.getElementById("p3").innerHTML = "两次的密码不一致"
      }


      if (username != "" && password != ""&&password2!=""&&password==password2) {
        this.register();
      }
    },
    register(){
      //获取dom的值
      var username= document.getElementById("username").value
      var password=document.getElementById("password").value

      //axios传值给后端
      axios({
        method: 'post',
        url: 'http://localhost:8081/register',
        params: {
          UserName:username,
          UserPassword:password,
          AccountSuspended:0
        }
      })
          .then(function (response) {
            console.log(response); // 前台调试能够看到获取到数据了
            ElMessage({
              message:"注册成功",
              type:'success'
            })
          })
          .catch(function (error) {
            console.log(error);
          });

    }
  }

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  height: 100%;
}
.container {
  height: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left:50%;
  top:300px;
  transform: translate(-50%, -50%);
}
.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  color: #a6c1ee;
}

.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
}
.input-item:placeholder {
  text-transform: uppercase;
}
.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 40px;
  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  color: #fff;
}
.msg {
  text-align: center;
  line-height: 88px;
}
a {
  text-decoration-line: none;
  color: #abc1ee;
}
</style>
